<template>
  <div>
    <div class="sider">
      <a href="#" class="logo">
        <img src="~@/assets/images/logo02.png" alt="logo" />
      </a>
      <div class="user_info">
        <img :src="userInfo.userPic" alt="person" />
        <span>欢迎&nbsp;&nbsp;{{userInfo.nickname}}</span>
        <b>管理员</b>
      </div>
      <!-- 左侧导航栏 -->
      <div class="menu">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          @open="open"
          @close="close"
          background-color="#323745"
          text-color="#fff"
          router
        >
          <el-menu-item index="/mainCount">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="/articleList">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/articleList">文章列表</el-menu-item>
              <el-menu-item index="/articleRelease">文章发布</el-menu-item>
              <el-menu-item index="/articleCategory">文章类别管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item index="/comment">
            <i class="el-icon-chat-dot-square"></i>
            <span slot="title">评论管理</span>
          </el-menu-item>
          <el-menu-item index="/user">
            <i class="el-icon-s-custom"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 顶部栏 -->
      <div class="header_bar">
        <div class="user_center_link">
          <a href="./user.html" target="main_frame">个人中心</a>
          <img :src="userInfo.userPic" alt="person" />
          <a href="javascript:void(0)" class="logout">
            <i class="iconfont icon-tuichu"></i> 退出
          </a>
        </div>
      </div>
      <!-- 右侧主体内容 -->
      <div class="main" id="main_body">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "./home.js";
import { mapState } from "vuex";
export default {
  name:'index',
  data() {
    return {}
  },
  async created() {
    let res = await getUserInfo()
    // console.log(res);
    this.$store.commit('updateUserInfo',res.data.data)
  },
  methods:{
    open() {
      console.log('open');
    },
    close() {
      console.log('close');
    },
  },
  computed:{
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less">
#main_body {
  overflow-y: scroll;
}
</style>
